import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Modal } from 'react-native';
import Cart from './CartScreen';
import { Ionicons } from "@expo/vector-icons";
const CartModal = ({ visible,onClose }) => {
    const cartItems = [
            {
                id: 1,
                name: 'Burger',
                price: 10,
                quantity: 1,
            },
            {
                id: 2,
                name: 'Pizzdsadsada',
                price: 15,
                quantity: 1,
            }];
  const [totalPrice, setTotalPrice] = useState(0);

  const updateQuantity = (id, quantity) => {
    const updatedCartItems = cartItems.map(item => {
      if (item.id === id) {
        item.quantity = quantity;
      }
      return item;
    });
    const totalPrice = updatedCartItems.reduce(
      (acc, item) => acc + item.price * item.quantity,
      0
    );
    setTotalPrice(totalPrice);
  };

  return (
    <Modal visible={visible} animationType="slide" transparent={true}>
      <View style={styles.modalContainer} >
        <TouchableOpacity style={styles.closeButton} onPress={onClose}>
          <Ionicons name="close" style={styles.closeButtonText} size={30}>
          </Ionicons>
        </TouchableOpacity>
        <Cart cartItems={cartItems} onUpdateQuantity={updateQuantity} />
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalContainer: {
    flex: 0.5,
    marginTop: 'auto',
    marginHorizontal: 20,
    transparent:'false',
    backgroundColor: '#fff',
    borderTopLeftRadius:20,
    borderTopRightRadius:20,
  },
  closeButton: {
    alignSelf: 'flex-end',
    marginBottom: 10,
  },
  closeButtonText: {
    paddingTop:20,
    paddingRight:20,
    fontWeight: 'bold',
    color: '#f4511e',
  },
  total: {
    fontSize: 24,
    fontWeight: 'bold',
    alignSelf: 'flex-end',
    marginTop: 20,
  },
  button: {
    backgroundColor: '#f4511e',
    borderRadius: 5,
    paddingTop:20,
    alignSelf: 'center',
    marginTop: 20,
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
  },
});

export default CartModal;
